<template>
  <div class='container'>
    <el-dialog title="题目地址" :visible.sync="dialogTableVisible">
      <div class="top">
         <el-row :gutter="20">
          <el-col :span="6">
            <span>【题型】:</span>
            <span v-if="questionDatalist.data.questionType === '1'">单选</span>
            <span v-if="questionDatalist.data.questionType === '2'">多选</span>
            <span v-if="questionDatalist.data.questionType === '3'">简答</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】:</span>
            <span v-text="questionDatalist.data.id"></span>
          </el-col>
          <el-col :span="6">
            <span>【难度】：</span>
             <span v-if="questionDatalist.data.difficulty === '1'">简单</span>
             <span v-if="questionDatalist.data.difficulty === '2'">一般</span>
             <span v-if="questionDatalist.data.difficulty === '3'">困难</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】：</span>
            <span v-text="questionDatalist.data.tags"></span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>【学科】：</span>
            <span v-text="questionDatalist.data.subjectName"></span>
          </el-col>
          <el-col :span="6">
            <span>【目录】：</span>
            <span v-text="questionDatalist.data.directoryName"></span>
          </el-col>
          <el-col :span="6">
            <span>【方向】：</span>
             <span v-text="questionDatalist.data.direction"></span>
          </el-col>
        </el-row>
      </div>
      <div class="center">
        <el-row :gutter="20">
          <el-col :span="12">
            <span >【题干】:</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <span style="color:#3535FF" v-html="questionDatalist.data.question"></span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <span v-if="questionDatalist.data.questionType === '1'">单选</span>
            <span v-if="questionDatalist.data.questionType === '2'">多选</span>
            <span v-if="questionDatalist.data.questionType === '3'">简答</span>
            <span> 选项：(以下选中的选项为正确答案)</span>
          </el-col>
        </el-row>
        <!-- 单选框 -->
        <el-radio-group :value="radio" v-if="questionDatalist.data.questionType === '1'">
          <el-radio
          v-for="(item, idx) in questionDatalist.data.options"
          :key="idx"
          :label="item.isRight"
          style="display:block; margin-bottom: 10px;">{{item.title}}</el-radio>
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox-group :value="checkList" v-if="questionDatalist.data.questionType === '2'">
          <el-checkbox
          v-for="(item, idx) in questionDatalist.data.options"
          :key="idx"
          :label="item.isRight"
          style="display:block; margin-bottom: 10px;">{{item.title}}</el-checkbox>
        </el-checkbox-group>
      </div>
        <div class="bottom1">
          <el-row :gutter="20">
          <el-col :span="12">
            <span>【参考答案】：</span>
            <el-button  type="danger" @click="playVideo(questionDatalist.data.videoURL)">视频答案解析</el-button>
              <div class="videoBox" v-show="showVideo" style = "width:400px;height:220px">
                <video :src="questionDatalist.data.videoURL" controls  width="400" ></video>
              </div>
          </el-col>
        </el-row>
        </div>
        <div class="bottom2">
          <el-row :gutter="20">
          <el-col :span="24">
            <span>【答案解析】：</span><span style="display: inline-block" v-html="questionDatalist.data.answer"></span>
          </el-col>
        </el-row>
        </div>
        <div class="bottom3">
          <el-row :gutter="20">
          <el-col :span="24">
            <span>【题目备注】：{{questionDatalist.data.remarks}}</span>
          </el-col>
        </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-button type="primary" class="fr" @click="closeDialogTableV">关闭</el-button>
          </el-col>
        </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'questionPreview',
  props: ['questionDatalist'],
  data () {
    return {
      // 视频播放标签
      videoView: null,
      radio: 1,
      dialogTableVisible: false,
      checkList: [1], // 多选
      showVideo: false // 是否显示视频播放框
    }
  },
  methods: {
    // 是否显示视频播放框
    playVideo () {
      this.showVideo = true
    },
    // 弹层显示
    dialogTableV () {
      this.dialogTableVisible = true
    },
    // 关闭弹窗
    closeDialogTableV () {
      this.dialogTableVisible = false
      // 关闭视频播放框
      this.showVideo = false
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
 .container {
   .top {
     padding-bottom: 15px;
     border-bottom: 1px solid rgb(192,192,192);
   }
   .center {
     padding-top: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgb(192,192,192) ;
   }
   .bottom1 {
     padding-top: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgb(192,192,192) ;
   }
   .bottom2 {
     padding-top: 15px;
     padding-bottom: 15px;
     border-bottom: 1px solid rgb(192,192,192) ;
   }
   .bottom3 {
     padding-top: 10px;
   }
 }
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 10px;
    }
  }
  .el-col {
    border-radius: 4px;
  }r
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
